<template>
<section>
    <div class="custorm--modelbox marketcoupon-edit">
        <renohome-right-nav :custormItemData="custormItemData" @rightNavChange="rightNavChange"></renohome-right-nav>
        <!-- <choose-path ref="choosepath" :changeEvt="chooseUrl" :tabType="tabType"></choose-path> -->
         <div class="edit-form-item">
          <div class="form-label">样式选择</div>
          <el-radio-group v-model="custormItemData.params.pattern">
            <el-radio :label="1">样式一</el-radio>
            <el-radio :label="2">样式二</el-radio>
            <el-radio :label="3">样式三</el-radio>
          </el-radio-group>
      </div>
        <div class="es-form-item">
            <div class="form-label mb-20">上下边距</div>
            <div class="flex-row flex-align-c">
                <el-slider :show-tooltip="false" style="width: 70%;" v-model="margincol" input-size="mini" :max="48">
                </el-slider>
                <div class="coupon-showslider">{{custormItemData.style.margincol}}px</div>
            </div>
        </div>
        <!-- <div class="es-form-item">
            <div class="form-label mb-20">每行数量</div>
            <el-radio-group v-model="custormItemData.params.rowtype">
                <el-radio label="1">每行2个</el-radio>
                <el-radio label="2">每行3个</el-radio>
            </el-radio-group>
        </div> -->
        <div class="es-form-item">
            <div style="padding-top: 20px;">
                <div class="item" draggable="false" v-for="(item, index) in custormItemData.data" :key="index">
                    <i
              class="el-icon-circle-close  delete-child"
              @click="delItemList({data:custormItemData.data,index})"
            ></i>
                    <div class="item-inner ">
                        <span class="labeltext">名称:</span>
                        <span>{{item.name}}</span>
                    </div>
                    <!-- <div class="item-inner ">
                        <span class="labeltext">价值:</span>
                        <span>{{item.cardvalue}}</span>
                    </div> -->
                    <div class="item-inner ">
                        <span class="labeltext">条件:</span>
                        <span>
                <el-popover
                  trigger="hover"
                  placement="top"
                >
                  <p>
                    <couponRender>
                      <template
                        slot="title"
                        v-if="item.coupon_type"
                      >
                        {{`${item.rule === 0 ? `${coupon_price[`${item.coupon_type}`]['textRule']}${item.rule_min_money}元`:''} ${coupon_price[`${item.coupon_type}`]['textPrev']}`}}
                      </template>
                      <template slot="price">
                        {{item.coupon_type === 40 ? `${item.min} - ${item.max}` : item.coupon_type === 20 ? item.discount : item.reduce_price}}
                      </template>
                      <template
                        slot="tail"
                        v-if="item.coupon_type"
                      >
                        {{coupon_price[`${item.coupon_type}`]['textLast']}}
                      </template>
                    </couponRender>
                  </p>
                  <div
                    slot="reference"
                    class="wlm-table-wrapper"
                  >
                    <couponRender>
                      <template
                        slot="title"
                        v-if="item.coupon_type"
                      >
                        {{`${item.rule === 0 ? `${coupon_price[`${item.coupon_type}`]['textRule']}${item.rule_min_money}元`:''} ${coupon_price[`${item.coupon_type}`]['textPrev']}`}}
                      </template>
                      <template slot="price">
                        {{item.coupon_type === 40 ? `${item.min} - ${item.max}` : item.coupon_type === 20 ? item.discount : item.reduce_price}}
                      </template>
                      <template
                        slot="tail"
                        v-if="item.coupon_type"
                      >
                        {{coupon_price[`${item.coupon_type}`]['textLast']}}
                      </template>
                    </couponRender>
                  </div>
                </el-popover>
              </span>
                    </div>
                </div>
            </div>
            <div class="goodscol-add" @click="uploadtoggle(['coupon'])"><i class="el-icon-plus"></i> 添加</div>
        </div>
    </div>
</section>
</template>

<script>
import defaultConfig from './utils/editConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  data() {
    return {
      pathCurrent: -1,
      coupon_price: {
        10: {
          textRule: '满',
          textPrev: '减免',
          textLast: '元'
        },
        20: {
          textRule: '满',
          textPrev: '打',
          textLast: '折'
        },
        30: {
          textRule: '满',
          textPrev: '减免',
          textLast: '元'
        },
        40: {
          textRule: '满',
          textPrev: '范围内随机',
          textLast: '元'
        }
      }
    }
  },
  computed: {
    margincol: {
      set(value) {
        this.custormItemData.style.margincol = value
      },
      get() {
        return this.conversionType('number', this.custormItemData.style.margincol)
      }
    }
  },
  components: {
    couponRender: {
      template: '<span><slot name="title"></slot><span class="text-danger"><slot name="price"></slot></span><slot name="tail"></slot></span>'
    }
  },

  mounted() { },

  methods: {
    uploadtoggle(type) {
      this.output({ type, params: { editKey: this.custormItemData.key } })
    },
    uploadFileCallBack(files) {
      const { key } = files
      if (key === 'ChooseCategories') {
        const { displayData: [file_path] } = files
        if (file_path) {
          this.custormItemData.data.push(file_path)
        } else {
          this.$message.error('请选择优惠券~!')
        }
      }
    },
    delChooseItem(currentIndex) {
      if (this.custormItemData.params.chooseItemList.length > 1) {
        this.$alert('确定删除此组件？', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            if (action === 'confirm') {
              this.custormItemData.params.chooseItemList.splice(currentIndex, 1)
              this.$message({
                type: 'success',
                message: `删除成功`
              })
            }
          }
        })
      } else {
        this.$message.error('删除失败，此商品至少保留一个！~')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.marketcoupon-edit {}
</style>
